<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员中心 / Admin Center - 阿里宝宝</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <a href="index.html">
                        <i class="fas fa-shopping-bag"></i>
                        <span>阿里宝宝</span>
                    </a>
                </div>
                
                <nav class="nav">
                    <a href="admin-dashboard.html" class="nav-link active">
                        <i class="fas fa-shield-alt"></i>
                        管理员中心 / Admin Center
                    </a>
                </nav>
                
                <div class="header-actions">
                    <div class="user-menu">
                        <button class="user-btn" id="userMenuBtn">
                            <i class="fas fa-user-circle"></i>
                            <span id="userName">管理员 / Admin</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="user-dropdown" id="userDropdown">
                            <a href="#" id="logoutBtn">
                                <i class="fas fa-sign-out-alt"></i>
                                退出登录 / Logout
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>管理员控制中心 / Admin Control Center</h1>
                <p>管理系统用户和订单数据 / Manage system users and order data</p>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalUsers">0</h3>
                        <p>总用户数 / Total Users</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background: #4ECDC4;">
                        <i class="fas fa-user-tag"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalCustomers">0</h3>
                        <p>买家数量 / Customers</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background: #45B7D1;">
                        <i class="fas fa-store"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalSellers">0</h3>
                        <p>卖家数量 / Sellers</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background: #F7931E;">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalOrders">0</h3>
                        <p>总订单数 / Total Orders</p>
                    </div>
                </div>
            </div>

            <!-- 每日订单统计 -->
            <div class="daily-orders-section">
                <div class="section-header">
                    <h2>每日订单统计 / Daily Order Statistics</h2>
                    <button class="btn btn-sm btn-outline" onclick="adminDashboard.loadDailyOrders()">
                        <i class="fas fa-sync-alt"></i>
                        刷新数据 / Refresh
                    </button>
                </div>
                
                <div class="summary-cards">
                    <div class="summary-card">
                        <h4>总订单数 / Total Orders</h4>
                        <p id="summaryTotalOrders">0</p>
                    </div>
                    <div class="summary-card">
                        <h4>总金额 / Total Amount</h4>
                        <p id="summaryTotalAmount">¥0.00</p>
                    </div>
                    <div class="summary-card">
                        <h4>平均订单金额 / Avg Order Amount</h4>
                        <p id="summaryAvgAmount">¥0.00</p>
                    </div>
                </div>
                
                <div class="daily-orders-table">
                    <table>
                        <thead>
                            <tr>
                                <th>日期 / Date</th>
                                <th>订单数量 / Orders</th>
                                <th>订单金额 / Amount</th>
                                <th>操作 / Actions</th>
                            </tr>
                        </thead>
                        <tbody id="dailyOrdersBody">
                            <tr>
                                <td colspan="4" style="text-align: center; padding: 20px; color: #999;">
                                    加载中... / Loading...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 用户管理 -->
            <div class="users-section">
                <div class="section-header">
                    <h2>用户管理 / User Management</h2>
                    <div class="filter-buttons">
                        <button class="btn btn-sm btn-primary" data-filter="all" onclick="adminDashboard.filterUsers('all')">全部 / All</button>
                        <button class="btn btn-sm btn-outline" data-filter="Customer" onclick="adminDashboard.filterUsers('Customer')">买家 / Customers</button>
                        <button class="btn btn-sm btn-outline" data-filter="Seller" onclick="adminDashboard.filterUsers('Seller')">卖家 / Sellers</button>
                        <button class="btn btn-sm btn-outline" data-filter="Admin" onclick="adminDashboard.filterUsers('Admin')">管理员 / Admins</button>
                    </div>
                </div>
                
                <div class="users-table">
                    <table>
                        <thead>
                            <tr>
                                <th>用户名 / Username</th>
                                <th>用户ID / User ID</th>
                                <th>类型 / Type</th>
                                <th>邮箱 / Email</th>
                                <th>手机 / Phone</th>
                                <th>密码 / Password</th>
                                <th>注册时间 / Created</th>
                                <th>操作 / Actions</th>
                            </tr>
                        </thead>
                        <tbody id="usersBody">
                            <tr>
                                <td colspan="8" style="text-align: center; padding: 20px; color: #999;">
                                    加载中...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    <!-- 订单详情模态框 -->
    <div class="modal" id="orderDetailModal">
        <div class="modal-content" style="max-width: 800px;">
            <div class="modal-header">
                <h3>订单详情 / Order Details</h3>
                <button class="modal-close" id="closeOrderDetailModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="orderDetailContent">
                <!-- 订单详情将通过JavaScript动态填充 -->
            </div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div class="loading" id="loading">
        <div class="loading-spinner"></div>
        <p>加载中... / Loading...</p>
    </div>

    <!-- 消息提示 -->
    <div class="toast" id="toast"></div>

    <!-- JavaScript -->
    <script src="js/api.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/admin-dashboard.js"></script>
</body>
</html>

